<template>
  <div class="alarm-log" >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="报警名称:">
        <el-input v-model="formInline.alarmName" placeholder="请输入报警名称" />
      </el-form-item>
      <el-form-item label="报警设备：" class="taglong">
        <el-input v-model="formInline.deviceId" placeholder="请输入设备编号"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <span class="demonstration">时间:</span>
          <el-date-picker
            v-model="value2"
            type="daterange"
            :shortcuts="shortcuts"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
      <el-scrollbar height="500px">
        <div style="overflow-x: hidden">
          <el-timeline>
            <el-timeline-item center  placement="top"  v-for="(item,index) in tableData" :key="index">
              <el-card>
                <el-row>
                  <el-col :span="6"><p><el-icon><clock /></el-icon>{{item.time}}</p></el-col>
                  <el-col :span="6">
                    <p>{{item.alarmName}}
                    <span v-if="item.level == 1" class="labLev">一般</span>
                    <span v-if="item.level == 2" class="labLev">严重</span>
                  </p></el-col>
                  <el-col :span="6"><p> {{item.quotaName}}<span class="unit">{{item.unit}}</span></p></el-col>
                  <el-col :span="6"><p>{{item.deviceId}}</p></el-col>
                </el-row>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { getAlarmLog } from '@/api/alarm'
import {
  HomeFilled,
  Location,
  Menu as IconMenu,
  Open,
  Camera,
  Clock
} from '@element-plus/icons-vue'
import { markRaw } from 'vue'
@Options({
  components: {
    HomeFilled: markRaw(HomeFilled),
    Location: markRaw(Location),
    Clock: markRaw(Clock),
    IconMenu: markRaw(IconMenu)
  }
})
export default class deviceManage extends Vue {
  private tableData = [];
  private total = 0
  value2:any = [new Date(), new Date()]
  data: any = null

  private formInline: {[index:string]:any} = {
    pageSize: 10,
    page: 1
  }

  async init () {
    const params:{[index:string]: any} = { ...this.formInline }
    params.start = (this as any).moment(this.value2[0]).format('YYYY-MM-DD 00:00:00')
    params.end = (this as any).moment(this.value2[1]).format('YYYY-MM-DD 23:59:59')
    console.log(params)
    getAlarmLog({ ...params }).then((res:any) => {
      this.tableData = res.items
      this.total = res.counts
    }).catch(err => {
      console.log(err)
    })
  }

  private getList () {
    this.init()
  }

  mounted () {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.alarm-log{
  //width: 100%
  overflow: hidden;
  padding:20px;
}
.el-timeline{
  //width: 100%;
}
.el-timeline-item {
  position: relative;
  padding-bottom: 0px;
}
.el-timeline-item__content{
  height: 40px;
}
.el-card{
  --el-card-padding: 0px 30px;
}
.labLev{
  display: inline-block;
  position: relative;
  padding: 2px 5px;
  margin-left: 10px;
  background: #FF5757;
  color:#fff;
  line-height: 12px;
  font-size: 12px;
  border-radius: 3px;
  &::before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    transform:translateY(-50%) rotate(45deg);
    left: -3px;
    top: 50%;
    background: #FF5757;
  }
}
.unit{
  color: #FF5757;
}
</style>
